<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    div.comment-list .title:before {
        vertical-align: middle;
        height: 1.2rem;
    }

    div.comment-list .title h2 {
        font-size: 1.3rem;
    }

    div.detail-comment-area .item-list a.item.comment_box {
        width: 80%;
    }

    div.detail-comment-area .item-list a.item.comment_box input.comment_input {
        height: 30px;
        font-size: 1.2rem;
        background: #e4e4e4;
        display: inline-block;
        vertical-align: middle;
        border: 0;
        margin-top: 15px;
    }
    .prize_title {
        padding: 0.5rem 0 0 0;
        font-size: 1.1rem;
        color: #808080;
        overflow:hidden
    }
    .prize_title.big {
        padding: 0 0 1rem 0;
        font-size: 1.2rem;
        color: #000;
    }
    .logo {
        float: left;
        width: 30px;
        height: 30px;
        border: 1px solid #DCDCDC;
        border-radius: 50%;
        margin-right: 12px;
        background: #FFFFFF;
        overflow: hidden;
    }
    .logo img {
        width: 100%;
    }
    .all_prize{
        float: right;
        vertical-align: middle;
        line-height: 30px;
        color: #40B486;
        background-color: #FFF;
    }
    .all_prize:after{
        display: inline-block;
        width: 10px;
        height: 15px;
        content: '';
        margin: 0 0 0 10px;
        background: url('<%=basePath%>/app/images/right-arrow.png') no-repeat 0px 0px;
        background-size:80%;
        vertical-align:middle;
    }

</style>
<script type="text/javascript" src="<%=basePath%>/app/js/mui.zoom.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/mui.previewimage.js"></script>
<!--content-list-wrap-->
<div id="detail-content" style="padding-bottom: 50px">
    <script type="text/html" id="tpl-detail">
        <div class="mui_comm">
            <div class="mui_comm_head">
                <div class="comm_logo">
                    <img src="{{resultList.head_url}}"/>
                </div>
                <div class="comm_title">
                    <a><h4>{{resultList.unit_name}}</h4></a>
                    <p>{{dataFormat(resultList.publish_time,'yyyy/MM/dd hh:mm')}}</p>
                </div>
            </div>
            <div class="mui_comm_list" data-id="{{resultList.id}}">
                <p>{{#resultList.content}}</p>
            </div>
            <div class="mui_comm_pics">
                {{if parseJson(resultList.pic).length == 1}}
                {{each parseJson(resultList.pic) as pics j}}
                <img src="{{pics.pic}}" data-preview-src="" data-preview-group="{{resultList.id}}"/>
                {{/each}}
                {{else}}
                <div class="sudoku">
                    {{each parseJson(resultList.pic) as pics j}}
                    <div class="multi">
                        <img src="{{pics.pic}}" data-preview-src="" data-preview-group="{{resultList.id}}"/></div>
                    {{/each}}
                </div>
                {{/if}}

            </div>
            <div class="mui_comm_num">
                <span>{{resultList.fabulous_num}} 赞</span>
                <span>{{resultList.comment_num}} 评论</span>
            </div>
            <div>
                <ul class="mui_comm_ul">
                    <li class="mui_comm_li left" data-id="{{resultList.id}}">
                        <span class="up {{if resultList.is_up == 1}}hover{{/if}}">赞</span>
                    </li>
                    <li class="mui_comm_li right" data-id="{{resultList.id}}">
                        <span class="comment" id="comment">评论</span>
                    </li>
                </ul>
            </div>
        </div>

        {{include 'tpl-prize' resultList}}

        <div class="mui_comm_comment">
            <!--comment-list-->
            <div class="comment-list" id="commentList">
                <div class="title">
                    <h2>热门评论</h2>
                </div>
                <div class="content">
                    <!--comment-list-row-->
                    {{include 'tpl-comment' resultList.comment}}
                    <!--/comment-list-row-->
                </div>
                <div class="more-box">
                    <a href="javascript:;" id="loadCommentMore">加载更多</a>
                </div>
            </div>
            <!--/comment-list-->
        </div>
        <!--detail-comment-area-->
        <div class="detail-comment-area">
            <div class="item-list">
                <a class="item bnt-back"><i class="icon icon-back"></i></a>
                <a class="item comment_box" id="commentWrite"><input type="text" class="comment_input" readonly
                                                                     placeholder="快来说两句吧！"></a>
            </div>
            <form action="#" method="post" class="upload-comment">
                <div class="btn-box">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="button" class="btn-submit">发布</button>
                </div>
                <textarea class="tta" rows="5" placeholder="请输入内容" id="inputComment"></textarea>
            </form>
            <div class="waterMark"></div>
        </div>
    </script>
</div>
<!-- 评论 -->
<script type="text/html" id="tpl-comment">
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('{{if value.head_url}}{{value.head_url}}{{/if}}'"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <a class="clickGood {{if value.is_up == 1}}hover{{/if}}" data-up="{{value.is_up}}"
                   data-id="{{value.id}}">{{value.fabulous_num}}</a>
                <h3><span class="username">{{value.user_name}}</span><span>{{formatTime value.create_time}}</span></h3>
            </div>
            <div class="cont">
                <p {{if value.is_admin==1}}style="color:red;"{{/if}}>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    {{/each}}
</script>

<script type="text/html" id="tpl-prize">
{{if 'undefined' !== typeof rewardList.list && rewardList.list.length > 0}}
<div class="mui_comm">
    <div class="mui_comm_reward">
        <div class="prize_title">奖品</div>
        <div class="prize_title big">{{prize}}</div>
        <div class="prize_title">幸运用户</div>
        <div class="prize_title big">
            {{each rewardList.list as value i}}
            <div class="logo">
                <img src="{{value.head_url}}">
            </div>
            {{/each}}
            <div class="all_prize">
                <span>全部{{rewardList.totalCount}}人</span>
            </div>
        </div>
    </div>
</div>
{{/if}}
</script>

<script>
    function loadData() {
        $.ajax({
            url: _basePath + "/app/community/detail",
            data: {
                id: '${id}'
            },
            dataType: 'json',
            success: function (data) {
                if (typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-detail', data);
                    $("#detail-content").append(_html);
                    mui.previewImage();
                }
            }
        });

    }




    $(function () {
        loadData();

    });
</script>